<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th rowspan="2" style="vertical-align: middle">{{ trans('user.username') }}</th>
            @foreach($Option['DOT_KIEM_TRA'] as $Object)
            <th colspan="{{count($Option['LAN_KIEM_TRA'])}}" class="text-center">
                {{ $Object->data }}
            </th>
            @endforeach
        </tr>
        <tr>
            @foreach($Option['DOT_KIEM_TRA'] as $Objecti)
            @foreach($Option['LAN_KIEM_TRA'] as $Objectj)
            <th class="text-center">
                {{ $Objectj->data }}
            </th>
            @endforeach
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach($aUser as $User)
        <tr>
            <td>{{{ $User->username }}}</td>
            @foreach($Option['DOT_KIEM_TRA'] as $Objecti)
            @foreach($Option['LAN_KIEM_TRA'] as $Objectj)
            <td class="btn-update" user_id="{{{$User->id}}}" DOT_KIEM_TRA="{{$Objecti->key}}"  LAN_KIEM_TRA="{{$Objectj->key}}" style="cursor: pointer">
                <div class="text-center tooltips" data-original-title="{{{$User->username}}} {{{$Objecti->data}}} {{{$Objectj->data}}}" data-placement="left">
                    {{isset($aUserCore[$User->id][$Objecti->key][$Objectj->key]) ? $aUserCore[$User->id][$Objecti->key][$Objectj->key]->score : '&nbsp;' }}
                </div>
            </td>
            @endforeach
            @endforeach
        </tr>
        @endforeach
    </tbody>
</table>
<script type="text/javascript">
    jQuery('.tooltips').tooltip();

    $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
            '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
            '<div class="progress progress-striped active">' +
            '<div class="progress-bar" style="width: 100%;"></div>' +
            '</div>' +
            '</div>';

    $.fn.modalmanager.defaults.resize = true;

    var $modal = $('#ajax-modal');

    $('table td.btn-update').click(function() {
        $('body').modalmanager('loading');

        var obj = {};
        obj['user_id'] = $(this).attr('user_id');
        obj['DOT_KIEM_TRA'] = $(this).attr('DOT_KIEM_TRA');
        obj['LAN_KIEM_TRA'] = $(this).attr('LAN_KIEM_TRA');

        $modal.load('{{route("score-form")}}', obj, function() {
            $modal.modal().on("hidden", function() {
                $modal.empty();
            });

            $modal.on('shown', function() {
                $('input:text:first', this).focus();
            });

            $modal.find('.btn-score-update').click(function() {
                var form = $('#form-score');
                var error = $('.alert-danger', form);
                var success = $('.alert-success', form);

                $.ajax({
                    url: form.attr('action'),
                    type: form.attr('method'),
                    data: form.serialize(),
                    dataType: 'json'
                }).done(function(response) {
                    if (response.status == 200) {

                        $('td[user_id="' + response.user_id + '"][DOT_KIEM_TRA="' + response.DOT_KIEM_TRA + '"][LAN_KIEM_TRA="' + response.LAN_KIEM_TRA + '"]')
                                .find('div').html(response.score).end();

                        $('.btn-close-modal').click();
                    }
                    else {
                        error.find('span').text(response.message);
                        error.show();
                        success.hide();
                    }
                }).fail(function() {
                    error.find('span').text('Check Your Connection.');
                    error.show();
                    success.hide();
                });
            });
        }, 'json');
    });
</script>